<template>
  <div id="Joe" class="june_main">
    <ants-header @toLogin="toLogin"/>
    <ants-container/>
<!--    <a-affix :offset-bottom="0">-->
      <div class="joe_footer">
        <div class="joe_container">
          <div class="item">
            Copyright © 2021 · <a href="https://www.wxmin.cn" target="_blank"><strong class="joe_run__day">June
            12</strong></a>
          </div>
          <div class="item run">
            <span>已运行<strong class="joe_run__day" style="margin-left: 10px">{{ runTime }}</strong> </span>
          </div>
          <div class="item">
            <a href="https://beian.miit.gov.cn/#/Integrated/index" style="cursor:pointer"
               target="_blank"
            >{{ record_num }}</a>
          </div>
        </div>
      </div>

<!--    </a-affix>-->
    <div class="joe_action">
      <a-back-top>
        <div class="joe_action_item scroll active">
          <!--          <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="25" height="25">-->
          <!--            <path-->
          <!--              d="M725.902 498.916c18.205-251.45-93.298-410.738-205.369-475.592l-6.257-3.982-6.258 3.414c-111.502 64.853-224.711 224.142-204.8 475.59-55.751 53.476-80.214 116.623-80.214 204.8v15.36l179.2-35.27c11.378 40.39 58.596 69.973 113.21 69.973 54.613 0 101.262-29.582 112.64-68.836l180.337 36.41v-15.36c-.569-89.885-25.031-153.6-82.489-206.507zM571.733 392.533c-33.564 31.29-87.04 28.445-118.329-5.12s-28.444-87.04 5.12-117.76c33.565-31.289 87.04-28.444 118.33 5.12s28.444 86.471-5.12 117.76zm-56.32 368.64c-35.84 0-64.284 29.014-64.284 64.285 0 35.84 54.044 182.613 64.284 182.613s64.285-146.773 64.285-182.613c0-35.271-29.014-64.285-64.285-64.285z"-->
          <!--            ></path>-->
          <!--          </svg>-->
          <svg-icon icon-class="top" style="font-size: 20px"/>
        </div>
      </a-back-top>
<!--      <a-popover placement="left">-->
<!--        <template #content>-->
<!--          <img src="@/assets/images/wechat.jpg" alt="love"-->
<!--               style="width: 100px;"-->
<!--          >-->
<!--        </template>-->
<!--        <div class="joe_action_item mode">-->
<!--          <svg-icon icon-class="wechat" class="icon-1 active" style="font-size: 20px"/>-->
<!--        </div>-->
<!--      </a-popover>-->
<!--      <a-popover placement="left">-->
<!--        <template #content>-->
<!--          <img src="@/assets/images/qq.jpg" alt="love"-->
<!--               style="width: 100px;"-->
<!--          >-->
<!--        </template>-->
<!--        <div class="joe_action_item mode">-->
<!--          <svg-icon icon-class="qq" class="icon-1 active" style="font-size: 20px"/>-->
<!--        </div>-->
<!--      </a-popover>-->

      <a-popover placement="left">
        <template #content>
              <div style="width: 220px; margin: 10px auto;">
                <!-- 下载链接 -->
                <img src="https://www.wxmin.cn\ants-file\imgUrl/applet_1703744038951_1720682189285.jpg" alt="love" style="width: 210px; border-radius: 10%;">
              </div>
        </template>
        <div class="joe_action_item mode">
          <svg-icon icon-class="wxapplet" class="icon-1 active" style="font-size: 20px"/>
        </div>
      </a-popover>
      <a href="https://gitee.com/hanshaung/ants" target="_blank" data-pjax-state="external" class="joe_action_item mode" style="color:#606266;">
        <svg-icon icon-class="gitee" class="icon-1 active" style="font-size: 20px"/>
      </a>
      <a href="mailto:448810587@qq.com" data-pjax-state="external" class="joe_action_item mode" style="color:#606266;">
        <svg-icon icon-class="email" class="icon-1 active" style="font-size: 20px"/>
      </a>
      <a-popover placement="left">
        <template #content>
          有问题欢迎
          <strong>提交</strong>
          <a href="https://gitee.com/hanshaung/ants/issues" target="_blank">《Issues》</a>
          或
          <a href="http://localhost:9527/leavingMessage">《留言》</a>
        </template>
        <div class="joe_action_item mode">
          <svg-icon icon-class="bug" class="icon-1 active" style="font-size: 20px"/>
        </div>
      </a-popover>
    </div>
    <article-login ref="articleLogin"/>
  </div>
</template>

<script>
import AntsHeader from './header/AntsHeader'
import AntsContainer from './container/AntsContainer'
import ArticleLogin from './subTables/ArticleLogin'
import {differenceDate2} from '@/utils/util'

const settings = require('@/settings.js')
import {getAction} from '@/api/manage'
import moment from "moment";

export default {
  name: 'Index',
  components: {
    AntsHeader,
    AntsContainer,
    ArticleLogin
  },
  data() {
    return {
      runTime: '',
      url: {
        getSysConfig: '/articleView/getAntsSystemConfig'
      },
      record_num: '京ICP备2021031302号',
    }
  },
  created() {
    setInterval(this.differenceDate, 1000)
    this.getSysConfig()
  },
  methods: {
    toLogin() {
      this.$refs.articleLogin.show()
    },
    differenceDate() {
      this.runTime = differenceDate2('2021-08-01')
    },
    getSysConfig() {
      getAction(this.url.getSysConfig, {}).then(res => {
        if (res.success) {
          this.record_num = res.result.record_num
          window.localStorage.setItem(settings.ants_sys_config_storage_key, JSON.stringify(res.result))
        }
      })
    },
  }

}
</script>

<style>
.ant-back-top {
  right: 30px !important;
  bottom: 50px !important;
}

.svg-icon {
  margin-right: 0;
}


.june_main {
  font-family: 'ChenYu Font';
  background: #f5f5f5;
  background-image: linear-gradient(90deg, rgba(60, 10, 30, .04) 5%, transparent 0), linear-gradient(1turn, rgba(60, 10, 30, .04) 5%, transparent 0);
  background-size: 35px 35px;
  background-position: 50%;
  background-repeat: repeat;
}
</style>

